<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章页面</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 文章头部 -->
<header id="header">
    <h1>文章标题：前端开发入门指南</h1>
    <p>作者：<span class="author">王乾明</span></p>
    <p>发布日期：<time class="date" datetime="2023-10-01">2025年1月12日</time></p>
</header>

<!-- 文章正文 -->
<article class="main-article">
    <h2>前言</h2>
    <p>
        前端开发是构建网站和应用程序用户界面的重要部分。它涉及 HTML、CSS 和 JavaScript 等技术，用于创建用户所看到和操作的界面。
    </p>

    <h2>HTML 基础</h2>
    <p>
        HTML 是网页的骨架，用于定义网页的结构和内容。常见的 HTML 标签包括标题标签（如 &lt;h1&gt;）、段落标签（如 &lt;p&gt;）和链接标签（如 &lt;a&gt;）。
    </p>

    <h2>CSS 基础</h2>
    <p>
        CSS 用于控制网页的样式，包括颜色、字体、布局等。通过 CSS，开发者可以使网页更加美观和易于阅读。
    </p>

    <h2>JavaScript 基础</h2>
    <p>
        JavaScript 是一种脚本语言，用于为网页添加动态交互功能。例如，表单验证、动态内容加载等都可以通过 JavaScript 实现。
    </p>
</article>

<!-- 评论区 -->
<section class="comments">
    <h2>评论区</h2>
    <article class="comment">
        <h3>用户A</h3>
        <p>这篇文章非常有用，帮助我理解了前端开发的基础知识。</p>
        <p>评论时间：<time datetime="2025-01-13">2025年01月13日</time></p>
    </article>

    <article class="comment">
        <h3>用户B</h3>
        <p>感谢作者分享，期待更多关于前端开发的教程。</p>
        <p>评论时间：<time datetime="2025-01-12">2023年01月12日</time></p>
    </article>
</section>

<!-- 页脚 -->
<footer id="footer">
    <p>&copy; 2023 前端开发入门指南. 版权所有.</p>
</footer>
</body>
</html>
